<template>
  <div class="login">
    <input
      type="text"
      placeholder="请输入手机号"
      v-model="username"
      class="username"
    />
    <input
      type="password"
      placeholder="请输入密码"
      v-model="password"
      class="password"
    />
    <div class="loginBtn" @click="login">登录</div>
  </div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    login() {
      //   this.$store.dispatch("phoneLogin", {
      //     username: this.username,
      //     password: this.password,
      //   });
      this.setUser({
        isLogin: true,
        username: this.username,
      });
      this.$router.push("/me");
    },
    ...mapMutations(["setUser"]),
  },
};
</script>
<style lang="less" scoped>
input:focus {
  border: none;
  outline: none;
}
input {
  border: none;
  outline: none;
}
.login {
  background: rgba(244, 15, 15, 0.75);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  border: 1px solid rgba(255, 255, 255, 0.18);
  width: 7rem;
  height: 3.4rem;
  border-radius: 0.4rem;
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
  padding: 0.2rem 0;
}
.username,
.password {
  width: 5rem;
  height: 0.66rem;
  display: block;
  margin: 0.25rem auto;
}
.loginBtn {
  background: #fff;
  width: 2rem;
  height: 0.66rem;
  line-height: 0.66rem;
  text-align: center;
  margin: 0.3rem auto;
  border-radius: 0.4rem;
}
</style>
  